<template>
  <div>
    <div class="goods-relevant">
      <div class="header">
        <i class="icon"></i>
        <span class="title">同类商品推荐</span>
      </div>
      <div class="xtx-carousel">
        <ul class="carousel-body">
          <li class="carousel-item fade">
            <div class="slider">
              <a
                href="javascript:;"
                v-for="item in revantList"
                @click="goItem(item.id)"
              >
                <img :src="item.picture" alt="" />
                <p class="name ellipsis">{{ item.name }}</p>
                <p class="price">¥{{ item.price }}</p>
              </a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        revantList:[]
    };
  },
  mounted(){
    this.getRevant()
  },
  methods: {

    getRevant() {
      this.axios({
        url:
          "http://pcapi-xiaotuxian-front-devtest.itheima.net/goods/relevant?id=" +
          this.$route.params.id +
          "&limit=16",
        method: "get",
      }).then((res) => {
        if (res.data.msg == "操作成功") {
          this.revantList = res.data.result;
          if (this.revantList.length >= 4) {
            this.revantList.length = 4;
          }
        }
        
      });
    },
    goItem(id) {
      console.log(id);
      this.$router.push({path:'/produck/'+id,params:{id:id}})
    },
  },
};
</script>

<style lang="scss" scoped>
.goods-relevant {
  background: #fff;
  min-height: 460px;
  margin-top: 20px;
}
.goods-relevant .header {
  height: 80px;
  line-height: 80px;
  padding: 0 20px;
}
.goods-relevant .header .icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  border-top: 4px solid #27ba9b;
  border-right: 4px solid #27ba9b;
  box-sizing: border-box;
  position: relative;
  transform: rotate(45deg);
}
.goods-relevant .header .icon:before {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  left: 0;
  top: 2px;
  background: #bcf1e6;
}
i {
  font-style: italic;
}
.goods-relevant .header .title {
  font-size: 20px;
  padding-left: 10px;
}
.xtx-carousel {
  height: 380px;
}
.xtx-carousel {
  width: 100%;
  height: 100%;
  min-width: 300px;
  min-height: 150px;
  position: relative;
}

.xtx-carousel .carousel-body {
  width: 100%;
  height: 100%;
}
.xtx-carousel .carousel-item.fade {
  opacity: 1;
  z-index: 1;
}
.xtx-carousel .carousel-item {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s linear;
}
.slider {
  display: flex;
  justify-content: space-around;
  padding: 0 40px;
}
.slider > a {
  width: 240px;
  text-align: center;
}
.xtx-carousel .carousel-item img {
  width: 100%;
  height: 100%;
}
.slider > a img {
  padding: 20px;
  width: 230px !important;
  height: 230px !important;
}
.slider > a .name {
  font-size: 16px;
  color: #666;
  padding: 0 40px;
}
.slider > a .price {
  font-size: 16px;
  color: #cf4444;
  margin-top: 15px;
}
</style>